<template>
	<view class="uni-tab-bar">
		<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="swiper-tab-list" :class="tabIndex==index ? 'active' : ''"
			 :id="tab.id" :data-current="index" @click="tapTab(index)">
				<view class="tabitems">{{tab.name}}</view>
			 </view>
		</scroll-view>
		<!-- 列表 -->
		<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="changeTab">
			<swiper-item v-for="(tab,index1) in newsitems" :key="index1">
				<scroll-view class="list" scroll-y @scrolltolower="loadMore(index1)">
					
					
					<!-- index模板 -->
					<template v-if="tabBars[index1].template === 'index'">
						
						<block v-for="(v,i) in tab.data" :key="i">
							
							<template v-if="v.type === 'swiper'">
								<!-- 轮播图组件 -->
								<swiper-image :resdata="v.data" />
							</template>
							<template v-else-if="v.type === 'indexnavs'">
								<!-- 首页分类 -->
								<index-nav :resdata="v.data" />
								<divider /> 
							</template>
							<template v-else-if="v.type === 'threeAdv'">
								<!-- 三图广告 -->
								<three-adv :resdata="v.data" />
								<divider /> 
							</template>
							<template v-else-if="v.type === 'oneAdv'">
								<!-- 大图广告位 -->
								<card :headTitle="v.data.title" 
								:bodyCover="v.data.cover" />
							</template>
							<template v-else-if="v.type === 'list'">
								<!-- 公共列表组件 750 - 5 = 745   372.5-->
								<view class="row j-sb">
									<block v-for="(vlist,listindex) in v.data" :key="listindex">
										<common-list :item="vlist" :index="listindex" />
									</block>
								</view>
							</template>
							
						</block>
					</template>
					<!-- special模板 -->
					<template v-if="tabBars[index1].template === 'special'">
						<block v-for="(v,i) in tab.data" :key="i">
							<template v-if="v.type === 'swiper'">
								<!-- 轮播图组件 -->
								<swiper-image :resdata="v.data" />
							</template>
							<template v-else-if="v.type === 'indexnavs'">
								<!-- 首页分类 -->
								<index-nav :resdata="v.data" />
								<divider /> 
							</template>
							<template v-else-if="v.type === 'list'">
								<!-- 公共列表组件-->
								<card headTitle="热卖爆品">
									<view class="row j-sb">
										<block v-for="(vlist,listindex) in v.data" :key="listindex">
											<common-list :item="vlist" :index="listindex" />
										</block>
									</view>
								</card>
							</template>
						</block>
					</template>
					
					<!-- 加载更多 -->
					<view class="uni-tab-bar-loading">
						{{tab.loadingText}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import swiperImage from "@/components/index/swiper-image.vue";
	import indexNav from "@/components/index/index-nav.vue";
	import threeAdv from "@/components/index/three-adv.vue";
	import card from "@/components/common/card.vue";
	import commonList from "@/components/common/common-list.vue";

	export default {
		components: {
			swiperImage,
			indexNav,
			threeAdv,
			card,
			commonList
		},
		data() {
			return {
				scrollLeft: 0,
				isClickChange: false,
				tabIndex: 0,
				newsitems: [],
				tabBars: []
			}
		},
		// 页面加载，加载数据
		onLoad() {
			// this.newsitems = this.randomfn()
			this.__init()
		},
		methods: {
			// 初始化页面
			__init(){
				this.$H.get("/index_category/data").then(data=>{
					// 初始化tabbars
					this.tabBars = data.category
					console.log(data);
					// 生成页面
					this.newsitems = this.setNewsitems(data)
				})
			},
			// 加载更多
			loadMore(e) {
				setTimeout(() => {
					this.addData(e);
				}, 1200);
			},
			// 加载更多模拟数据
			addData(e) { //拿到当前索引e
				if (this.newsitems[e].data.length > 30) {
					this.newsitems[e].loadingText = '没有更多了';
					return;
				}
				let arr = [
					{ 
						type:"swiper",
						data:[
							{ src:"../../static/images/demo/demo4.jpg" },
							{ src:"../../static/images/demo/demo4.jpg" },
							{ src:"../../static/images/demo/demo4.jpg" }
						]
					},
					{
						type:"indexnavs",
						data:[
			{ src:"/static/images/indexnav/1.png",text:"新品发布" },
			{ src:"/static/images/indexnav/2.gif",text:"小米众筹" },
			{ src:"/static/images/indexnav/3.gif",text:"以旧换新" },
			{ src:"/static/images/indexnav/4.gif",text:"一分换团" },
			{ src:"/static/images/indexnav/5.gif",text:"超值特卖" },
		]
					},
					{
						type:"list",
						data:[
							{
								cover:"/static/images/demo/list/1.jpg",
								title:"米家空调",
								desc:"1.5匹变频",
								oprice:2699,
								pprice:1399
							},
							{
								cover:"/static/images/demo/list/1.jpg",
								title:"米家空调",
								desc:"1.5匹变频",
								oprice:2699,
								pprice:1399
							},
							{
								cover:"/static/images/demo/list/1.jpg",
								title:"米家空调",
								desc:"1.5匹变频",
								oprice:2699,
								pprice:1399
							},
							{
								cover:"/static/images/demo/list/1.jpg",
								title:"米家空调",
								desc:"1.5匹变频",
								oprice:2699,
								pprice:1399
							},
							{
								cover:"/static/images/demo/list/1.jpg",
								title:"米家空调",
								desc:"1.5匹变频",
								oprice:2699,
								pprice:1399
							},
							{
								cover:"/static/images/demo/list/1.jpg",
								title:"米家空调",
								desc:"1.5匹变频",
								oprice:2699,
								pprice:1399
							}
						]
					}
				];
				this.newsitems[e].data = [...this.newsitems[e].data,...arr];
			},
			// 改变tab
			async changeTab(e) {
				let index = e.target.current;
				if (this.newsitems[index].data.length === 0) {
					this.addData(index)
				}
				if (this.isClickChange) {
					this.tabIndex = index;
					this.isClickChange = false;
					return;
				}
				let tabBar = await this.getElSize("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				console.log(tabBar);
				for (let i = 0; i < index; i++) {
					let result = await this.getElSize(this.tabBars[i].id);
					width += result.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth,
					nowElement = await this.getElSize(this.tabBars[index].id),
					nowWidth = nowElement.width;
				if (width + nowWidth - tabBarScrollLeft > winWidth) {
					this.scrollLeft = width + nowWidth - winWidth;
				}
				if (width < tabBarScrollLeft) {
					this.scrollLeft = width;
				}
				this.isClickChange = false;
				this.tabIndex = index; //一旦访问data就会出问题
			},
			getElSize(id) { //得到元素的size
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			async tapTab(e) { //点击tab-bar
				let tabIndex = e;
				if (this.newsitems[tabIndex].data.length === 0) {
					this.addData(tabIndex)
				}
				if (this.tabIndex === tabIndex) {
					return false;
				} else {
					let tabBar = await this.getElSize("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					this.scrollLeft = tabBarScrollLeft;
					this.isClickChange = true;
					this.tabIndex = tabIndex;
				}
			},
			// 生成页面
			setNewsitems(e) {
				let ary = [];
				// 拿到tabbars的长度，根据长度生成页面
				let tablength = this.tabBars.length;
				for (let i = 0; i < tablength; i++) {
					let aryItem = {
						loadingText: '加载更多...',
						data: []
					};
					if (this.tabBars[i].template === 'index') {
						aryItem.data = e.data
					}
					ary.push(aryItem);
				}
				return ary;
			}
		}
	}
</script>

<style>
	.tabitems{
		display: inline-block;
		width: 75upx;
		border-bottom: 5upx solid #FFFFFF;
	}
	.active .tabitems{
		border-bottom-color: #FD6801;
	}
	.uni-tab-bar-loading {
		text-align: center;
		font-size: 28upx;
		color: #999;
	}
</style>
